<script setup>
import { ref } from 'vue'
import { getBannerApi,getHotlistApi,getList } from '../../services/index'


const drawerRef = ref()
const banners = ref([])
const map = ref([])
const list = ref([])


const showDrawer = () => {
  drawerRef.value.open()
}

const goSearch = () => {
  uni.navigateTo({
    url:'/pages/search/search'
  })
}





getBannerApi()
  .then((res) => {
    // console.log(res.data.blocks[1].creatives[0].resources[0].uiElement)
    banners.value = res.data.blocks[0].extInfo.banners

  })
getHotlistApi()
  .then((res) => {
    console.log(res.recommend)
    map.value = res.recommend
  })


const getDetail = (id) => {
  uni.navigateTo
  getList(id)
    .then((res) => {
      console.log(res.privileges)
    })
}




</script>

<template>
  <view class="nav">
    <i class="iconfont icon-liebiao" @click="showDrawer"></i>
    <uni-search-bar class="search" readonly placeholder="搜索" bgColor="#EEEEEE" @click="goSearch" />
  </view>
  <scoll-view>
    <swiper class="swiper" autoplay="true" indicator-dots="true">
      <swiper-item v-for="item in banners" :key="banners.targetId">
        <image mode="widthFix" :src="item.pic" />
      </swiper-item>
    </swiper>
    <view>
      <text>推荐歌曲</text>
    </view>
    <view  class="bgMap">
      <view v-for="it in map" :key="it.id" class="map" @click="getDetail(it.id)">
        <image mode="widthFix" :src="it.picUrl" />
        <view>{{ it.name }}</view>
      </view>
    </view>
    <br/>
    <view>
      <text>猜你喜欢的歌曲</text>
    </view>
    <br/>
    <view>
      <tetx>你的雷达歌曲</tetx>

    </view>
    
  </scoll-view>
  <uni-drawer ref="drawerRef" mode="left" :width="320">
    抽屉内容
  </uni-drawer>
</template>

<style lang="scss" scoped>
.nav{
  display: flex;
  align-items: center;
  .iconfont{
    width: 36px;
    height: 36px;
    font-size: 24px;
    text-align: center;
    line-height: 36px;
  }
  .search{
    flex: 1;
  }
}
.swiper{
  height: 276rpx;
  image{
    width: 100%;
  }
}
.bgMap::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.bgMap{
  height: 310rpx;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  .map{
    margin-right: 5px;
    image{
    width: 120px;
    }
  }
  view{
    font-size: 12px;
  }

}
</style>
